<template>
	<div class="cart">
		<header>
			<router-link to="/mobile/cart"><</router-link>
			<h3>确认订单</h3>
		</header>
		<div class="box">
			<ul>
				<li v-for="(item,i) in orderall" :key="item.id">
					<div class="img">
						<img :src="`http://127.0.0.1/api/public/showimg/${item.book.pic}`">
					</div>
					<div class="msg">
						<p>{{item.book.name}}</p>
							<aside class="right">
								<span>￥{{item.price}}</span>
								<label>数量:{{item.num}}</label>
							</aside>
					</div>
				</li>
			</ul>
		</div>
	<div class="input">
		<table style="width: 80%;  margin-left: 1.25rem;">
			<tr>
				<th colspan="2">个人信息</th>
			</tr>
			<tr>
				<td>姓名:</td>
				<td>{{usr.name}}</td>
			</tr>
			<tr>
				<td>手机号:</td>
				<td>{{usr.phone}}</td>
			</tr>
			<tr>
				<td>地址:</td>
				<td>{{usr.addr}}</td>
			</tr>
		</table>
		<aside>
			<button><router-link to="/mobile/addr">></router-link></button>
		</aside>
	</div>	
		<div class="pay">
			<span>合计:￥{{sumPrice}}</span>
			<button @click="addOrder()">下单</button>
		</div>
	</div>
</template>

<script>
	import { mapActions, mapState } from 'vuex';
	export default {
		name:'MoblieCart',
		data(){
			return{
				orderall:[],
				usr:{},
				ord:{ordid:0,amount:0,ship2addr:'',ship2name:'',ship2phone:'',carts:[]},
			}
		},
		computed:{
			...mapState('order',['orders']),
			sumPrice(){
				let sumPrice = 0;
				this.orderall.forEach((item)=>{
					sumPrice += item.price * item.num;
				})
				return sumPrice;
			}
		},
		methods:{
			...mapActions('order',['delHistory']),
			addOrder(){
				this.ord.ship2name = this.usr.name;
				this.ord.ship2phone = this.usr.phone;
				this.ord.ship2addr = this.usr.addr;
				this.ord.carts = this.orderall;
				this.$postj('/api/fore/cart/add2Order',this.ord).then((resp)=>{
					console.log(resp.data.data);
					if(resp.data.data.ordid){
						this.$message({
							message:'下单成功',
							type:'success'
						})
						this.$router.push({
							path:'/mobile/pay',
							query:{id:resp.data.data.ordid}
						})
					}else{
						this.$message({
							message:'下单失败',
							type:'error'
						})
					}
				})
				this.delHistory();
			},
		},
		mounted() {
			this.orderall = this.orders;
			this.$get('/api/user/shipInfo').then((resp)=>{
				console.log(resp.data.data);
				this.usr =resp.data.data; 
			})
		}
	}
</script>

<style scoped>
	a{
		color: black;
	}
	.cart{
		width: 100%;
		background-color: #DCDCDC;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.cart header{
		width: 100%;
		height: 3.5rem;
		background-color: white;
		display: flex;
		align-items: center;
		margin-bottom: 0.625rem;
	}
	.cart header a{
		font-size: 1.25rem;
		margin-left: 1.25rem;
		margin-right: 30%;
	}
	.cart .box{
		width: 95%;
		margin: 0 auto;
	}
	.cart .box ul{
		width: 100%;
		align-items: center;
		background-color: white;
		margin-bottom: 1rem;
		border-radius: 0.5rem;
	}
	.cart .box ul li{
		width: 80%;
		height: 4rem;
		display: flex;
		align-items: center;
		margin-bottom: 1rem;
	}
	.cart .box ul li .img{
		margin-left: 1.25rem;
		width: 30%;
		height: 100%;
		border-radius: 0.3125rem;
	}
	.cart .box ul li .img img{
		width: 50%;
		height: 70%;
		display: flex;
		margin: 0.6rem auto;
		
	}
	.cart .box ul li .msg{
		width: 60%;
		height: 100%;
	}
	.cart .box ul li .msg p {
		font-size: 0.8rem;
		margin-bottom: 1.5rem;
		width: 100%;
		overflow:hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.cart .box ul li .right{
		width: 100%;
		font-size: 0.8rem;
	}
	.cart .box ul li .right span{
		margin-right: 3rem;
		color: red;
	}
	
	.cart .pay{
		width: 100%;
		height: 4rem;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: space-around;
		position: fixed;
		bottom: 0;
	}
	.cart .pay button{
		height: 3.125rem;
		width: 8rem;
		border-radius: 10rem;
		border: none;
		outline: none;
		color: white;
		background-color: deepskyblue;
		font-size: 1rem;
	}
	.cart .input{
		display: flex;
		width: 95%;
		margin: 0.625rem auto;
		background-color: white;
		border-radius: 0.5rem;
	}
	.cart .input aside{
		width: 10%;
		height: 100%;
		display: flex;
		margin-top: 3rem;
		justify-content: center;
	}
	.cart .input aside button{
		background-color: white;
		border: none;
		font-size: 1rem;
		color: white;
	}
	
</style>
